<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>邮箱验证</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/

        function codeCheck() {
            var codeCheck = $("#codeCheck");
            var codeDIV = $("#codeDIV");
            $.post({
                url: ctxPath+"codeCheck",
                data: {'code': $("#code").val()},
                success: function (data) {
                    if (data.toString() === '') {
                        codeCheck.css("color", "green");
                        codeDIV.removeClass("has-error");
                        codeDIV.addClass("has-success");

                    } else {
                        codeCheck.css("color", "red");
                        codeDIV.removeClass("has-success");
                        codeDIV.addClass("has-error");


                    }
                    codeCheck.html(data);
                }
            });
        }

        function canSubmit() {
            return $("#codeCheck").css('color') === 'rgb(0, 128, 0)';
        }
    </script>
    <style>
        .progressText {
            font-size: large;
            margin-top: 5px;
            color: white;
            font-family: YouYuan, serif;
            font-weight: bold;
        }
    </style>
</head>
<body>
<!--<h3 th:text="${session.regEmailAdress}"></h3>-->
<!--<form action="/regist" method="post" onsubmit="return canSubmit()">-->
<!--<input type="text" id="code" name="code" placeholder="请输入验证码" onblur="codeCheck()">-->
<!--<input type="submit">-->
<!--</form>-->
<!--<span id="codeCheck"></span>-->
<!--<span style="color: red" th:text="${mailCheck}" th:if="${not #strings.isEmpty(mailCheck)}"></span>-->

<div class="container" style="margin-top: 5%">
    <div class="progress progress-striped active" style="height: 30px">
        <div class="progress-bar progress-bar-warning" role="progressbar"
             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
             style="width: 33%;">
            <p class="progressText">注册信息</p>
        </div>
        <div class="progress-bar progress-bar-info" role="progressbar"
             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
             style="width: 34%;">
            <p class="progressText">验证邮箱</p>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <h3 th:text="${session.regEmailAdress}" class="text-center"></h3>
        <div class="col-md-6 col-md-offset-3">
            <form role="form" action="regist" method="post" onsubmit="return canSubmit()">


                <div class="form-group input-group-lg" style="margin-top: 27px" id="codeDIV">
                    <input type="text" class="form-control" id="code" name="code" placeholder="请输入验证码"
                           onblur="codeCheck()">
                </div>

                <p class="text-danger" style="font-size: medium;color: red" id="codeCheck"></p>


                <div style="margin-top: 5px">
                    <button type="submit" class="btn btn-block btn-primary btn-lg" onclick="codeCheck()" id="submit">
                        注册
                    </button>
                </div>
                <div style="margin-top: 15px">
                    <p class="text-danger" style="font-size: medium;color: red" th:text="${mailCheck}"
                       th:if="${not #strings.isEmpty(mailCheck)}"></p>
                </div>
            </form>
        </div>

    </div>
</div>
</body>
</html>